import "./styles.css";

import { Popover } from "./Popover";
import React from 'react'
export default function App() {
  return (
    <div className="App">
      <h1>Floating UI Non-Modal Popover</h1>
      <p>
        Opening keeps focus on trigger button. The next tab cycles through the
        popover content — when focus leaves, it hides.
      </p>
      <Popover
        render={({ close, labelId, descriptionId }) => (
          <>
            <h3 id={labelId}>Create new app</h3>
            <p id={descriptionId}>Keep the name short!</p>
            <input placeholder="Name" />
            <button onClick={close}>Create</button>
          </>
        )}
      >
        <button>Click to open popover</button>
      </Popover>
    </div>
  );
}
